<template>
    <view class="container" style="padding:16px;">
		<uni-forms ref="formRef" :modelValue="form" :label-width="80" :border="true" err-show-type="toast">
			<uni-forms-item label="举报类型" name="bizType">
                <uni-data-select
                    v-model="binTypeIndex"
                    :localdata="binTypeList"
                    @change="bizTypeChange"
                    :clear="false"
                ></uni-data-select>
			</uni-forms-item>
            <uni-forms-item label="手机号" name="bizMobile" :inputBorder="false">
                <uni-easyinput type="text" v-model="form.bizMobile" placeholder="请输入您要举报的手机号"  :inputBorder="false"/>
            </uni-forms-item>
			<uni-forms-item label="您的联系方式"  name="contactMobile">
				<uni-easyinput type="text" v-model="form.contactMobile" placeholder="请输入您的联系方式"  :inputBorder="false"/>
			</uni-forms-item>
			<uni-forms-item label="问题描述" name="description">
                <uni-easyinput type="textarea" v-model="form.description" placeholder="请描述您遇到的问题" maxlength="-1"/>
			</uni-forms-item>
		</uni-forms>

        <button @click="submit" class="uni-btn" style="margin-top:50px;">提交</button>

    </view>
</template>

<script>
import {ReportApi} from '@/api/user/ReportApi'

export default {
    data() {
        return {
			Config: this.$Config,
			Common: this.$Common,
			Auth: this.$Auth,
			ShareUtil: this.$ShareUtil,
			State: this.$store.state,
			Dict: this.$Dict,

			binTypeIndex:0,
			binTypeList:[
                { value: 1, text: "服务信息" },
                { value: 2, text: "商家" }
            ],

			form:{
                bizType:'',
				bizMobile:'',
                description:'',
                contactMobile:''
			},

            rules: {
                bizType: {
                    rules:[
                        {required: true,errorMessage: '请选择举报类型'}
                    ]
                },
                bizMobile: {
                    rules:[
                        {required: true,errorMessage: '请输入您要举报的手机号'},
                        {minLength: 11,maxLength: 11,errorMessage: '手机号长度为 {maxLength} 个字符'}
                    ]
                },
                contactMobile: {
                    rules:[
                        {required: true,errorMessage: '请输入您的联系方式'},
                        {minLength: 11,maxLength: 11,errorMessage: '手机号长度为 {maxLength} 个字符'}
                    ]
                },
                description: {
                    rules:[
                        {required: true,errorMessage: '请描述您遇到的问题'}
                    ]
                }
            }
        }
    },
    onLoad() {

    },
    onReady() {
        // 需要在onReady中设置规则
        this.$refs.formRef.setRules(this.rules)
    },
    methods: {
        bizTypeChange(e){
            this.form.bizType = e
        },

        submit() {
            let that = this
            this.$refs.formRef.validate().then(res=>{
                uni.showModal({
                    title: '提示',
                    content: '确定提交吗？',
                    success: function (res) {
                        if (res.confirm) {
                            ReportApi.create(that.form).then((response) => {
                                that.Common.navigateBackRefresh().initPage()
                            })
                        }
                    }
                })
            }).catch(err =>{
                // console.log('表单错误信息：', err);
            })
        }
    }
}
</script>

<style scoped>
page{background: #FFF;}

::v-deep .uni-select{border:none;}


</style>
